<ui:composition template="../template/plantilla_01.xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">

    <f:metadata>
        <f:viewParam name="idPool" value="#{poolSessionBean.idPool}"/>
        <f:event type="preRenderView" listener="#{poolSessionBean.cargarPool}" />
        
    </f:metadata>

    <ui:define name="head">

        <h:outputStylesheet library="css" name="principalPool.css"/>
        <h:outputStylesheet library="css" name="jquery.countdown.css"/>

        <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown.js" />
        <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown-es.js" />

        <style type="text/css">
            .col1{
                width: 80px;
            }

            .col2{
                width: 100%;
            }
        </style>

    </ui:define>

    <ui:define name="loginUsuario" >
        
    </ui:define>
    
    <ui:define name="panelCentral" >       

        <h:form prependId="false" >
        <p:outputPanel layout="block" rendered="#{not usuarioSessionBean.estaRegistrado}" style="margin-top:80px;"/>
            <ui:include src="estadoPool.xhtml"  />

            <p:spacer width="900" height="20" />

            <p:wizard flowListener="#{poolSessionBean.onFlowProcess}" 
                      rendered="#{poolSessionBean.pool.activa}"
                      backLabel="Atrás" nextLabel="Siguiente" >

                <p:tab id="inicio" title="Inicio" >

                    <p:panel style="height: 300px;" rendered="#{not usuarioSessionBean.estaRegistrado}">

                        <p:messages showDetail="true" />

                        <h:panelGroup id="pgLogin2" layout="block" style="width: 400px; min-height: 100px; margin-bottom: 15px;">

                            <p:inputText id="txtUsuario2" value="#{usuarioSessionBean.usuario.nombre}"

                                     requiredMessage="El usuario es obligatorio" size="13" >
                                <f:validateLength maximum="20" />
                            </p:inputText>
                            <p:watermark for="txtUsuario2" value="Usuario" />

                            <p:spacer width="5" height="10" />
                            <p:password value="#{usuarioSessionBean.usuario.password}" feedback="false" id="txtPassword2"
                                    maxlength="20"
                                    requiredMessage="La clave es obligatoria" size="13"
                                     />
                            <p:watermark for="txtPassword2" value="Clave" />

                            <p:spacer width="5" height="10" />

                        </h:panelGroup>
                        <h:panelGroup layout="block" style="width: 400px; height: 250px; float:left; position:relative;" >

                            <p:commandButton icon="ok16" value="Ingresar"
                                             actionListener="#{poolSessionBean.login}"
                                             update="@form"
                                              />
                        </h:panelGroup>

                    </p:panel>

                    <p:panel style="width: 100%; height: auto;" rendered="#{usuarioSessionBean.estaRegistrado}" >

                        <p:messages showDetail="true" />

                        <p:graphicImage value="#{poolSessionBean.pool.pathImagenInicioCompra}"
                                           rendered="#{not empty poolSessionBean.pool.pathImagenInicioCompra}"
                                           width="960" height="230"  />

                        <h:panelGroup layout="block" style="text-align: right; font-weight: bold; padding: 5px; color: yellowgreen; font-size: 16px;">
                             Haga click en siguiente para continuar...
                        </h:panelGroup>
                    </p:panel>

                </p:tab>

                <p:tab id="condicionPago" title="Condición de Pago" >

                    <p:panel header="Condición de pago" style="height: 400px;">

                        <p:messages showDetail="true" />

                        <h:panelGrid columns="2" cellpadding="5" cellspacing="5" style="margin: auto; margin-top: 45px; width: 800px;"
                                     styleClass="col1,col2">

                            <h:panelGroup layout="block" >

                                <p:graphicImage alt="CNDPAG"
                                                value="#{aplicacionBean.parametro.pathImagenesDefault}/pool/persona-condicion.png" />
                            </h:panelGroup>

                            <p:dataTable value="#{poolSessionBean.condicionesDisponibles}" var="c" style="width: 700px;"  >

                                <p:column headerText="Condición pago" width="220">
                                    <h:outputText value="#{c.descripcion}" />
                                </p:column>

                                <p:column headerText="Observaciones" width="200">
                                    <h:outputText value="#{c.observaciones}" />
                                </p:column>

                                <p:column headerText="Precio c/IVA" style="text-align: right;" width="100" >
                                    <h:outputText value="#{c.precioPoolConIVA}" >
                                        <f:convertNumber pattern="0.00" />
                                    </h:outputText>
                                </p:column>

                                <p:column headerText="Seleccionar" width="80" style="text-align: center;">
                                    <p:commandButton icon="ok16" 
                                                     actionListener="#{poolSessionBean.seleccionarCondicionPago(c)}"
                                                     process="@this"
                                                     update="@form"/>
                                </p:column>

                            </p:dataTable>

                            <h:outputText value=""/>

                            <h:panelGroup id="condicionSeleccionada" layout="block" style="width: 700px;"
                                          rendered="#{not empty poolSessionBean.condicionPago}" >

                                    <p:graphicImage alt="CNDPAG" width="20" height="20"
                                                value="#{aplicacionBean.parametro.pathImagenesDefault}/pool/flecha-verde.png" />

                                    <p:spacer width="5"/>

                                    <h:outputText value="Condición seleccionada:" style="font-size: 15px;font-weight: bold; color: gray;" />
                                    <p:spacer width="5"/>
                                    <h:outputText value="#{poolSessionBean.condicionPago.descripcion}" style="font-size: 20px; font-weight: bold; color: #82c100;" />
                                    <p:spacer width="20"/>
                                    <h:outputText value="Precio c/I.V.A.: $ "  style="font-size: 15px;font-weight: bold; color: gray;"/>
                                    <p:spacer width="5"/>
                                    <h:outputText value="#{poolSessionBean.condicionPago.precioPoolConIVA}" style="font-size: 20px; font-weight: bold; color: #82c100;" >
                                        <f:convertNumber pattern="0.00" />
                                    </h:outputText>

                            </h:panelGroup>
                        </h:panelGrid>
                    </p:panel>
                </p:tab>

                <p:tab id="cantidades" title="Cantidades" >

                    <p:panel header="Ingrese las cantidades a pedir" style="min-height: 400px; clear: both;">

                        <p:growl showDetail="true" />
                        
                        <p:outputPanel style="min-height: 400px;">

                        <p:dataTable id="dtCantidades" value="#{poolSessionBean.reserva.itemReservas}" var="i" style="position: relative; float: left;">

                            <p:column  width="150">

                                <p:lightBox rendered="#{not empty i.producto.imggra}" >
                                    <h:outputLink value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imggra}.jpg"
                                                  title="#{i.producto.descrp}">

                                        <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imgchi}.jpg"
                                                            width="120" height="120"
                                                            rendered="#{not empty i.producto.imgchi}" />
                                    </h:outputLink>
                                </p:lightBox>

                                <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imgchi}.jpg"
                                                width="120" height="120"
                                                rendered="#{not empty i.producto.imgchi and empty i.producto.imggra}" />

                                <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}intercap.jpg"
                                                width="120" height="120"
                                                rendered="#{empty i.producto.imgchi}"
                                                style="border: 1px solid lightgrey;" />
                            </p:column>

                            <p:column headerText="Código" width="80">
                                <h:outputText value="#{i.tippro}-#{i.artcod}" />
                            </p:column>

                            <p:column headerText="Descripción" >
                                <h:outputText value="#{i.producto.descrp}" />
                            </p:column>

                            <p:column headerText="Precio Unit. c/IVA" width="60">
                                <h:outputText value="#{i.precioFinalConIVA}" >
                                    <f:convertNumber pattern="0.00" />
                                </h:outputText>
                            </p:column>

                            <p:column headerText="Cant. Disponible" width="100" >
                                <div style="text-align: right;">
                                    <h:outputText value="#{i.cantidadDisponible}" 
                                              rendered="#{i.cantidadDisponible >0}">
                                        <f:convertNumber pattern="0" />
                                    </h:outputText>                                
                                </div>                               

                                <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/pool/agotado.png"
                                                width="95"
                                                rendered="#{i.cantidadDisponible == 0}" />
                            </p:column>

                            <p:column headerText="Cantidad a pedir" width="100">
                                <p:inputText value="#{i.cantidad}"  size="6" style="text-align: right;"
                                             rendered="#{i.cantidadDisponible >0}" >
                                    <f:convertNumber pattern="0" />
                                </p:inputText>
                                <p:spacer width="2"/>
                                <p:commandButton action="#" update="dtCantidades" icon="conversor16"
                                                 title="Actulizar precio"
                                                 rendered="#{i.cantidadDisponible >0}" />
                            </p:column>

                            <p:column headerText="Total c/IVA" width="60">
                                <h:outputText value="#{i.totalLineaConIVA}" rendered="#{i.cantidadDisponible >0}" >
                                    <f:convertNumber pattern="0.00"  />
                                </h:outputText>
                            </p:column>

                        </p:dataTable>

                        </p:outputPanel>    
                    </p:panel>
                    
                </p:tab>

                <p:tab id="confirmacion" title="Confirmación">

                    <p:panel header="Confirmación de reserva" style="min-height: 400px;">

                        <p:messages showDetail="true" />

                        <h:panelGrid columns="2" columnClasses="colLabel,colDato"
                                     rendered="#{not poolSessionBean.compraConfirmada}" >

                            <h:outputText value="Notas:" />
                            <p:inputTextarea cols="60" rows="4" value="#{poolSessionBean.reserva.textos}" />

                        </h:panelGrid>

                        <p:commandButton value="Confirmar reserva" icon="ok16"
                                         style="left:400px; top:30px;"   
                                         actionListener="#{poolSessionBean.confirmarReserva}"
                                         update="@form" process="@this"
                                         rendered="#{not poolSessionBean.compraConfirmada}" />


                        <h:outputLink value="#{application.contextPath}/home/" rendered="#{poolSessionBean.compraConfirmada}"
                                       style="font-size: 12px; font-weight: bold;" >                

                            <p:graphicImage value="#{poolSessionBean.pool.pathImagenFinCompra}" />

                        </h:outputLink>

                    </p:panel>

                </p:tab>

            </p:wizard>

            <p:graphicImage value="#{poolSessionBean.pool.pathImagenPoolFinalizado}"
                            rendered="#{not empty poolSessionBean.pool.pathImagenPoolFinalizado and not poolSessionBean.pool.activa}"/>

            <h:panelGroup layout="block" styleClass="saldoActual"
                          style="width: 100%;  padding: 15px;"
                          rendered="#{not empty poolSessionBean.pool.tituloA4Promocional and not empty poolSessionBean.pool.pathA4Promocional}">

                <h:outputText value="#{poolSessionBean.pool.tituloA4Promocional}    " />
                <a href="#{poolSessionBean.pool.pathA4Promocional}" target="_blank">Ver</a>  |  <a href="#{poolSessionBean.pool.pathA4Promocional}" download="#{poolSessionBean.pool.pathA4Promocional}">Descargar</a>    

            </h:panelGroup> 

        </h:form>

        <p:spacer height="30"/>

    </ui:define>

</ui:composition>